<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-gutter-column-lg">
    <div class="aui-gutter-column-sm">
        <h2>{{'common_copy_data_label' | i18n}}</h2>
    </div>
    <lv-datatable [lvData]='copyTableData' (lvSortChange)="copySortChange($event)" [lvPaginator]="page1" lvSort
        #copyTable lvAsync [(lvActiveSort)]='copyActiveSort'>
        <thead>
            <tr>
                <th width="40px"></th>
                <ng-container *ngFor="let col of copyColumns">
                    <th *ngIf="col.show" [lvShowFilter]="col.filter" (lvFilterChange)="copyFilterChange($event)"
                        [attr.class]="col.class" [attr.width]="col.width" [(lvFilters)]="col.filterMap"
                        lvCellKey="{{ col.key }}" [lvShowSort]="col.showSort" lvShowCustom lvFilterCheckAll>
                        {{col.label}}
                        <div lvCustom *ngIf="col.key === 'location'">
                            <i #copyLocationPopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                [ngClass]="{ active: !!copyLocation }" lv-popover
                                [lvPopoverContent]="copyLocationFilterTpl"
                                lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                        </div>
                        <div lvCustom *ngIf="col.key === 'name'">
                            <i #copyNamePopover="lvPopover" lv-icon="lv-icon-search" [lvColorState]="true"
                                [ngClass]="{ active: !!copyName }" lv-popover [lvPopoverContent]="copyNameFilterTpl"
                                 lvPopoverPosition="bottom" lvPopoverTrigger="click"></i>
                        </div>
                </ng-container>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let item of copyTable.renderData'>
                <tr [ngClass]='{"lv-table-row-highlight": copyTable.isSelected(item)}'>
                    <td width="40px" (click)='selectionCopyRow(item)'>
                        <div class="td-radio-container">
                            <label lv-radio [ngModel]='copyTable.isSelected(item)'
                                [lvDisabled]="!!item.disabled"></label>
                        </div>
                    </td>
                    <ng-container *ngFor="let col of copyColumns">
                        <td>
                            <ng-container [ngSwitch]="col.key">
                                <ng-container *ngSwitchCase="'display_timestamp'">
                                    {{item.display_timestamp | date: 'yyyy-MM-dd HH:mm:ss'}}
                                </ng-container>
                                <ng-container *ngSwitchCase="'status'">
                                    <aui-status [value]="item.status" type="copydata_validStatus">
                                    </aui-status>
                                </ng-container>
                                <ng-container *ngSwitchCase="'generated_by'">
                                    {{item.generated_by | textMap: 'CopyData_generatedType'}}
                                </ng-container>
                                <ng-container *ngSwitchCase="'generation'">
                                    {{item.generation | textMap: 'CopyData_Generation'}}
                                </ng-container>
                                <ng-container *ngSwitchCase="'version'">
                                    {{getVersion(item)}}
                                </ng-container>
                                <ng-container *ngSwitchDefault>
                                    {{item[col.key] | nil}}
                                </ng-container>
                            </ng-container>
                        </td>
                    </ng-container>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <div class="aui-paginator-wrap">
        <lv-paginator [lvPageSize]="copyPageSize" [lvTotal]="copyTotal" [lvPageIndex]="copyPageIndex" #page1
            [lvShowPageSizeOptions]="false" (lvPageChange)="copyPageChange($event)" lvMode='simple'
            [hidden]="!copyTotal">
        </lv-paginator>
    </div>
</div>


<ng-container *ngIf="componentData.resourceType !== resourceType.Storage">
    <lv-collapse [lvMultiExpansion]="'false'" lvType="simple">
        <lv-collapse-panel [lvTitle]="policyTitle" [lvExpanded]="false">
            <ng-container *ngTemplateOutlet="policyTemplate"></ng-container>
        </lv-collapse-panel>
    </lv-collapse>
</ng-container>

<ng-template #policyTitle>
    <h3>{{'common_mount_update_policy_label'|i18n}}</h3>
</ng-template>


<ng-template #policyTemplate>
    <lv-datatable [lvData]="policyTableData" [lvPaginator]="page2" #policyTable
        (lvSortChange)="policySortChange($event)" lvSort lvAsync class="double-row-height">
        <thead>
            <tr>
                <th width="40px"></th>
                <th *ngFor="let col of policyColumns" [lvShowFilter]="col.filter" [attr.width]="col.width"
                    (lvFilterChange)="policyFilterChange($event)" [(lvFilters)]="col.filterMap" lvCellKey="{{col.key}}"
                    lvShowSort="{{col.key === 'liveMountCount'}}" lvShowCustom>
                    {{ col.label}}
                    <div lvCustom *ngIf="col.key === 'name'">
                        <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!policyName }"
                            lv-popover [lvPopoverContent]="policyNameFilterTpl"
                            lvPopoverPosition="bottom" lvPopoverTrigger="click" #policyNamePopover="lvPopover"></i>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let item of policyTable.renderData'>
                <tr [ngClass]='{"lv-table-row-highlight": policyTable.isSelected(item)}'>
                    <td width="40px" (click)='selectionPolicyRow(item)'>
                        <label lv-radio [ngModel]='policyTable.isSelected(item)' class="policy-radio"></label>
                    </td>
                    <td>
                        <span lv-overflow>
                            {{item.name}}
                        </span>
                    </td>
                    <td>
                        {{item.copyDataSelectionPolicy | textMap: 'CopyData_Selection_Policy'}}
                    </td>
                    <td>
                        <ng-container *ngIf="item.schedulePolicy === schedulePolicy.AfterBackupDone">
                            <span lv-overflow>
                                {{'explore_after_backup_done_label'|i18n}}
                            </span>
                        </ng-container>
                        <ng-container *ngIf="item.schedulePolicy === schedulePolicy.PeriodSchedule">
                            <div class="main-schedule-policy-container">
                                <div class="main-schedule">
                                    <span>
                                        {{executionPeriodLabel}}{{spaceLabel}}{{item.scheduleInterval}}
                                        {{spaceLabel}}{{item.scheduleIntervalUnit | textMap: 'Interval_Unit'}}
                                    </span>
                                    <span class="aui-text-help-sm">
                                        {{firstExecuteTimeLabel}}{{spaceLabel}}
                                        {{item.scheduleStartTime | date: 'yyyy-MM-dd HH:mm:ss'}}
                                    </span>
                                </div>
                            </div>
                        </ng-container>
                    </td>
                    <td>
                        <span lv-overflow>
                            <ng-container [ngSwitch]="item.retentionPolicy">
                                <ng-container *ngSwitchCase="retentionPolicy.Permanent">
                                    {{'explore_permanent_retention_label'|i18n}}
                                </ng-container>
                                <ng-container *ngSwitchCase="retentionPolicy.LatestOne">
                                    {{'explore_always_latest_label'|i18n}}
                                </ng-container>
                                <ng-container *ngSwitchCase="retentionPolicy.FixedTime">
                                    {{'common_retention_label'|i18n}}{{spaceLabel}}{{item.retentionValue}}
                                    {{spaceLabel}}{{item.retentionUnit | textMap:'Interval_Unit'}}
                                </ng-container>
                                <ng-container *ngSwitchDefault>
                                    --
                                </ng-container>
                            </ng-container>
                        </span>
                    </td>
                    <td>
                        {{item.liveMountCount | nil}}
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <div class="aui-paginator-wrap">
        <lv-paginator #page2 [lvShowPageSizeOptions]="false" [lvPageSize]="policyPageSize" [lvTotal]="policyTotal"
            [lvPageIndex]="policyPageIndex" (lvPageChange)="policyPageChange($event)" [hidden]="!policyTotal"
            lvMode='simple'>
        </lv-paginator>
    </div>
</ng-template>




<ng-template #policyNameFilterTpl>
    <lv-search [(ngModel)]="policyName" (lvSearch)="searchByPolicyName($event)" [lvFocus]="true">
    </lv-search>
</ng-template>

<ng-template #copyLocationFilterTpl>
    <lv-search [(ngModel)]="copyLocation" (lvSearch)="searchByCopyLocation($event)" [lvFocus]="true">
    </lv-search>
</ng-template>

<ng-template #copyNameFilterTpl>
    <lv-search [(ngModel)]="copyName" (lvSearch)="searchByCopyName($event)" [lvFocus]="true">
    </lv-search>
</ng-template>
